<template>
    <div class="home">

        <h1 style="margin-bottom:25px">个人中心</h1>
        <el-row>
            <el-col :span="7"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="10">
                <div class="grid-content bg-purple-light" style="margin-left:-100px">
                  <el-form :model="formData"  ref="formData" label-width="150px">
                    <el-form-item label="账号" >
                      <el-input :disabled="true" v-model ="formData.stuAccount"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" class="password">
                      <el-input v-model ="formData.stuPass"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" class="nickname">
                      <el-input v-model ="formData.stuName"></el-input>
                    </el-form-item>
                    <el-form-item label="学号" class="schoolid">
                      <el-input v-model ="formData.schoolid"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" class="class">
                      <el-input v-model ="formData.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="爱好" class="class">
                      <el-input v-model ="formData.habit"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" class="class">
                      <el-input v-model ="formData.email"></el-input>
                    </el-form-item>
                </el-form>
                <div class="button1">
                    <el-button @click="$router.back(-1)">返回</el-button>
                    <el-button type="primary" @click="submitForm(formData)">确认</el-button>
                </div>
                
                </div>
              </el-col>
            <el-col :span="7"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
    </div>
</template>

<script>
import { getStore } from "../../libs/storage";
export default {
    data() {
      return{
        formData:{
          email: '',
          habit: '',
          schoolid: '',
          stuAccount: '',
          stuName: '',
          stuPass: '',
          tel: ''
        }
      }
    },
  created() {
            this.initialize();
        },
  methods: {
    initialize(){
            this.$axios
                .post("/stupersion", {
                id: getStore("stuid")
                })
                .then(resp => {
                  console.log(resp.data);
                if (resp && resp.status === 200) {
                   this.formData.email = resp.data[0].email;
                   this.formData.habit = resp.data[0].habit;
                   this.formData.schoolid = resp.data[0].schoolid;
                   this.formData.stuAccount = resp.data[0].stuAccount;
                   this.formData.stuName = resp.data[0].stuName;
                   this.formData.stuPass = resp.data[0].stuPass;
                   this.formData.tel = resp.data[0].tel;
                    return;
                }
                })
                .catch(failResponse => {
                });
            }, 
  }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  /* .bg-purple-dark {
    background: #fdfeff;
  }
  .bg-purple {
    background: #fdfeff;
  }
  .bg-purple-light {
    background: #fdfeff;
  } */
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    /* background-color: #fdfeff; */
  }


</style>

